<template>
  <div>
    <el-row style="background-color: #545652; color: #d5d5d5">
      <el-col :span="3" :xs="3">读书</el-col>
      <el-col :span="3" :xs="3">电影</el-col>
      <el-col :span="3" :xs="3">音乐</el-col>
      <el-col :span="3" :xs="3">同城</el-col>
      <el-col :span="3" :xs="3">阅读</el-col>
      <el-col :span="3" :xs="3">
        <el-dropdown placement="bottom">
          <span style="color:rgb(213, 213, 213)">
            更多
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="el-icon-phone"></i> 客服
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :span="3" :xs="3">
        <el-badge value="0">提醒</el-badge>
      </el-col>
      <el-col :span="3" :xs="3">用户</el-col>
    </el-row>

    <el-row style="background-color: #f0f3f5">
      <el-col :span="24" style="padding-top: 20px">
        <el-row>
          <el-col :span="5" style="text-align: center" :xs="24">
            <el-link style="font-size: 25px">观影小楼</el-link>
          </el-col>
          <el-col :span="10" :xs="12">
            <el-form :model="form" inline>
              <el-form-item label size="small" prop="search">
                <el-input
                  type="text"
                  :value="form.search"
                  clearable
                  style="width: 170%"
                  placeholder="搜索电影、电视剧、综艺"
                >
                  <template #append>
                    <el-button type="primary" size="small">
                      <i class="el-icon-search"></i>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="5" :push="2" :xs="24">
            <p>小楼昨夜</p>
            <p>又东风</p>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-col>

      <el-col :span="20" :xs="20">
        <el-row>
          <el-col :span="3" :xs="3">影讯</el-col>
          <el-col :span="3" :xs="3">电影</el-col>
          <el-col :span="3" :xs="3">电视剧</el-col>
          <el-col :span="3" :xs="3">排行榜</el-col>
          <el-col :span="3" :xs="3">分类</el-col>
          <el-col :span="3" :xs="3">影评</el-col>
          <el-col :span="3" :xs="3">榜单</el-col>
          <el-col :span="3" :xs="3">影报</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="margin-top: 50px">
      <el-col :span="18" :xs="24">
        <el-row>
          <el-col :span="3" :xs="3">
            <strong>最近热门电影</strong>
          </el-col>
          <el-col :span="2" :xs="3">热门</el-col>
          <el-col :span="2" :xs="3">最新</el-col>
          <el-col :span="3" :xs="3">小楼高分</el-col>
          <el-col :span="3" :xs="3">冷门佳片</el-col>
          <el-col :span="2" :xs="3">华语</el-col>
          <el-col :span="2" :xs="3">欧美</el-col>
          <el-col :span="2" :xs="3">日本</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing: border-box; padding: 10px">
                  <el-image src="/static/beicsj.jpg"></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/zhiyys.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/congb.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/yinxr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/yinxr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing: border-box; padding: 10px">
                  <el-image src="/static/jiezt.jpg"></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/xiaofr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/liezhu.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/mianyjm.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/shensm.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="24" :xs="24">
            <el-row>
              <el-col :span="3" :xs="3">
                <strong>最近热门电影</strong>
              </el-col>
              <el-col :span="2" :xs="3">热门</el-col>
              <el-col :span="2" :xs="3">最新</el-col>
              <el-col :span="3" :xs="3">小楼高分</el-col>
              <el-col :span="3" :xs="3">冷门佳片</el-col>
              <el-col :span="2" :xs="3">华语</el-col>
              <el-col :span="2" :xs="3">欧美</el-col>
              <el-col :span="2" :xs="3">日本</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing: border-box; padding: 10px">
                  <el-image src="/static/beicsj.jpg"></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/zhiyys.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/congb.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/yinxr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/yinxr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing: border-box; padding: 10px">
                  <el-image src="/static/jiezt.jpg"></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/xiaofr.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/liezhu.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/mianyjm.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
                <el-col :span="4" :xs="4">
                  <el-image
                    src="/static/shensm.jpg"
                    style="border-sizing: border-box; padding: 10px"
                  ></el-image>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :xs="24">
        <h3>电影评分</h3>
        <p>
          <strong>一周口碑榜</strong>
          <span style="margin-left: 20px">
            <el-link>更多榜单</el-link>
          </span>
          <el-divider></el-divider>
        </p>
        <el-row style="font-size: 8px">
          <el-col :span="24" :xs="24">
            <span>1</span>
            <span style="margin-left: 15px">
              <el-link>七号房的礼物</el-link>
            </span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
            <span>2</span>
            <span style="margin-left: 15px">
              <el-link>七号房的礼物</el-link>
            </span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
            <span>3</span>
            <span style="margin-left: 15px">
              <el-link>七号房的礼物</el-link>
            </span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
            <span>4</span>
            <span style="margin-left: 15px">
              <el-link>七号房的礼物</el-link>
            </span>
            <el-divider></el-divider>
          </el-col>

          <el-col :span="24" :xs="24">
            <span>5</span>
            <span style="margin-left: 15px">
              <el-link>七号房的礼物</el-link>
            </span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
          <strong>热门小楼</strong>
        <el-divider></el-divider>
        <el-row>
          <el-badge value="new">跟着电影去旅行</el-badge>
          <el-badge value="hot" type="warning">美剧必看</el-badge>
          <el-row>
            <strong>喜欢请收藏</strong>
          </el-row>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <div>观影喜爱区</div>
          <div>小楼休息区</div>
          <div>个人邮箱:1256230450@qq.com</div>
          <strong>关注我们</strong>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        search: "",
      },
    };
  },
};
</script>
